<template>
    <div class="userList">
      <a-row>
        <a-col>
          <h3>
            <img style="margin-right: 8px;margin-top:-5px;" src="https://pob.majnoon-ifms.com/pob//thema/Majnoon/images/file-contract-solid.svg"/>
            <span style="margin-right: 8px;"> {{ $t("角色列表") }}</span>
          </h3>
        </a-col>
      </a-row>
  
      <a-row style="margin-top: 32px;padding: 0 24px">
        <a-col :span="24" class="user-list-btn">
          <div>
            <a-button class="add-btn" @click="add"><i class="fa fa-plus" style="margin-right: 8px;"/> {{ $t("New") }} </a-button>
            <a-button class="refresh-btn" @click="getList"><i class="fa fa-sync" style="margin-right: 8px;"/> {{ $t("refresh") }}</a-button>
          </div>
          <a-input-search
            :placeholder="`${$t('search')}...`"
            style="width: 200px"
            v-model:value="queryParam.keyword"
            @search="onSearch"
          />
        </a-col>
        <a-col :span="24" style="margin-top: 16px;">
          <a-table
            :loading="loading"
            rowKey="id"
            :columns="columns"
            :data-source="dataSource"
            :pagination="false"
            bordered>
            <template #bodyCell="{ column, text, record, index }">
              <template v-if="column.dataIndex === 'Locked'">
                <span v-if="record.status === 1">{{  $t("启动") }}</span>
                <span v-else-if="record.status === 0">{{ $t("禁用") }}</span>
                <span v-else>-</span>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <a href="javascript:void(0)" title="View" @click="edit(record)"> 修改 </a>
                <a href="javascript:void(0)" title="View" @click="resetPassword(record)"> {{$t('重置密码')}} </a>
              </template>
            </template>
          </a-table>
          <itforcePagination 
            :queryParam="queryParam" 
            @onSwitchPage="onSwitchPage"
            @onChange="onChange"
            @pre="pre"
            @next="next"/>
        </a-col>
      </a-row>
    </div>
  </template>
  <script setup lang="ts">
  import { reactive, ref, watch, onMounted, nextTick, getCurrentInstance } from "vue";
  import { useI18n } from 'vue-i18n';
  const { t: $t } = useI18n();
  import { GetSysUserPage } from "@/api/user/index";
  import {AES_ECB_DECRYPT, AES_ECB_ENCRYPT} from '@/utils/encrypt'
  import itforcePagination from '@/components/itforce-pagination/itforce-pagination.vue'
  import { GetCodeDict } from "@/api/public";
  import { Modal, message } from 'ant-design-vue';
  import { GetSysUserAdd, PutSysUserUpdate } from "@/api/user/index";
  const loading = ref(false)
  const dataSource = ref([])
  let visible = ref<boolean>(false)
  let addVisible = ref<boolean>(false)
  let itemInfo = ref({})
  const columns = [
    {
      title: () => {
        return (
          $t('全名')
        )
      },
      dataIndex: 'account',
      sorter: true,
      align: 'left'
    },
    {
      title: () => {
        return $t('邮箱用户名') 
      },
      dataIndex: 'email',
      sorter: true,
      align: 'left'
    },
    {
      title: () => {
        return (
          $t('部门')
        )
      },
      dataIndex: 'deptName',
      sorter: true,
      align: 'center'
    },
    {
      title: () => {
        return (
          $t('系统角色')
        )
      },
      dataIndex: 'systemRoles',
      sorter: true,
      align: 'center'
    },
    {
      title: () => {
        return (
          $t('锁定')
        )
      },
      dataIndex: 'Locked',
      sorter: true,
      align: 'center'
    },
    {
      title: () => {
        return (
          $t('状态')
        )
      },
      dataIndex: 'statusDesc',
      sorter: true,
      align: 'center'
    },
    {
      title: () => {
        return (
          $t('操作')
        )
      },
      dataIndex: 'action',
      align: 'center'
    }
  ]
  
  let queryParam = reactive({
    pageNo: 1,
    pageSize: 10,
    totalCount: 0,
    pageNum: 15,
    currentTotal: 0,
    keyword: null
  })
  
  const getList = () => {
    loading.value = true
    GetSysUserPage({
      ...queryParam
    }).then((res) => {
      if (res.code !== 200) return
      dataSource.value = res.data
      queryParam.totalCount = res.totalCount
      queryParam.pageNo = res.pageNo
      queryParam.pageSize = res.pageSize
      queryParam.currentTotal = dataSource.value.length
    }).finally(() => {
      loading.value = false
    });
  }
  const ok = () => {
    getList()
  }
  const edit = debounce( (item: object) => {
    addVisible.value = true
    itemInfo.value = item
  }, 1000)
  const add = debounce( () => {
    addVisible.value = true
    itemInfo.value = {}
  }, 1000)
  onMounted(() => {
    // consolelog(AES_ECB_DECRYPT('kkyFWepEgfTAjVN90tQf2g==', 'acc1200000000000'))
    getList()
  })
  const onSwitchPage = (pageSize) => {
    queryParam.pageSize = pageSize
    getList()
  }
  const onChange = (pageNo) => {
    queryParam.pageNo = pageNo
    getList()
  }
  const pre = () => {
    const pageNo = queryParam.pageNo - 1
    if (pageNo <= 0) return
    queryParam.pageNo =pageNo
    getList()
  }
  const next = () => {
    const total = queryParam.pageNo * queryParam.pageNum
    if (total >= queryParam.totalCount) return
    queryParam.pageNo = queryParam.pageNo + 1
    getList()
  }
  const getStatusName = (val) => {
    const name = statusList.value.finde(item => item.id === val)
    return name.value.descZh
  }
  const onSearch = debounce((evt) => {
    // ---- ^ 业务逻辑 ----
    // 定义fn方法
    const fn = (evt) => {
      getList()
    }
    // 调用fn方法
    fn(evt)
    // ---- / 业务逻辑 ----
  }, 1000)
  
  const userListNewModalRef = ref(null)
  const createClick = () => {
    userListNewModalRef.value.showModal({})
  }
  const resetPassword = (record: object) => {
    itemInfo.value = record
    visible.value = true
  }
  const handleUserAdd = (formState) => {
    if (formState.id) {
      getUpdate(formState)
    } else {
      getUpdate(formState)
    }
  }
  const getAdd = (formState) => {
    formState.password = btoa(formState.password)
    GetSysUserAdd({
      ...formState
    }).then(res => {
      if (res.code !== 200) return message.warning(res.msg);
      message.success(res.msg);
      userListNewModalRef.value.hideModal()
      getList()
    })
  }
  
  const getUpdate = (formState) => {
    formState.password = btoa(formState.password)
    PutSysUserUpdate({
      ...formState
    }).then(res => {
      if (res.code !== 200) return message.error(res.msg);
      message.success(res.msg);
      userListNewModalRef.value.hideModal()
      getList()
    })
  }
  </script>
  <style lang="scss" scoped>
  .userList {
    padding: 32px 32px 0 32px;
    .user-list-btn {
      display: flex;
      justify-content: space-between;
    }
    .add-btn {
      background-color: #1ab394;
      color: #fff;
    }
    .refresh-btn {
      background-color: #1a7bb9;
      color: #fff;
    }
  }
  
  ::v-deep {
    .ant-table-wrapper .ant-table-thead >tr>th {
      background-color: #f4f4f4;
    }
  }
  </style>
  